<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>深度监视</title>
</head>
<body>
<div id="app">
  <!-- 需求为需要监视温度的变化，第一个是需要监视摄氏温度，然后是华氏温度和摄氏温度都需要监视-->
  <h3>温度监视</h3>
  <p>当前时间：{{currentDate}}{{getCurrentTime()}}</p>
  <hr>
  <p>摄氏温度：{{temperature.Celsius}} °C</p>
  <button @click.passive="temperature.Celsius=++temperature.Celsius">获取最新摄氏温度温度信息</button>
  <hr>
  <p>华氏温度：{{temperature.Fahrenheit}}  °F</p>
  <button @click.passive="temperature.Fahrenheit=++temperature.Fahrenheit">获取最新化氏温度温度信息</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        temperature:{
          Celsius:'13',
          Fahrenheit:"48"
        },
        window,
        currentDate:null
      }
    },
    //这中写法比较适合需要监视的属性非常清晰，一开始就明确要监视哪些属性的场景
    watch:{
      // //使用常见额方式编写监视器，监听深层的摄氏温度这个属性
      // 'temperature.Celsius': {
      //   //监视属性的回调函数是否立即执行
      //   immediate:true,
      //   //handler什么时候被调用，只有当我们监视的属性发生变化时，handler才会被调用
      //   handler(newValue,oldValue){
      //     console.log("Celsius监视属性的handler被调用了")
      //     if (newValue>=29){
      //       alert("天气炎热，请做好相应的防暑错误，严格控制户外作业时间")
      //     }
      //   }
      // },
      //第二个需求，既要监视摄氏温度，也需要监视华氏温度？使用深度监视实现
      temperature: {
        //监视属性的回调函数是否立即执行
        immediate: true,
        //开启深度监视
        deep:true,
        handler(newValue, oldValue) {
          console.log("深度监视的回调函数被调用了")
          if (newValue){
            console.log("温度数据发生了变更，请注意温度变化，根据规定安排安全工作计划")
          }
        }
      }
    },
    methods:{
      getCurrentTime(){
        setInterval(()=>{
          let time=new Date().toLocaleTimeString()
          this.currentDate= time;
        },1000)
      }
    },
  })
</script>
</body>
</html>
